<template>
	<el-form :model="form" :label-width="labelWidth" :inline="inline" ref="heyForm">
		<el-form-item 
			v-for="(item, index) in formLabel" 
			:label="item.label" 
			:prop="item.prop" 
			:key="index">
			<el-input v-if="item.type === 'input'" v-model="form[item.prop]" 
				:placeholder="item.placeholder || ''" 
				autocomplete="off"
			></el-input>
			<el-input v-if="item.type === 'password'"	v-model="form[item.prop]" 
				type="password" 
				:placeholder="item.placeholder || ''" 
				autocomplete="off"
			></el-input>
			<el-switch v-if="item.type === 'switch'" v-model="form[item.prop]"></el-switch>
			<el-date-picker 
				v-if="item.type === 'date'" 
				type="date"
				v-model="form[item.prop]"
				:placeholder="item.placeholder || ''" 
				value-format="yyyy-MM-dd"
			></el-date-picker>
			<el-select v-if="item.type === 'select'" v-model="form[item.prop]" 
				:placeholder="item.placeholder || ''">
				<el-option 
					v-for="sel in item.opts" 
					:key="sel.value"
					:value="sel.value" 
					:label="sel.label"
				></el-option>
			</el-select>
		</el-form-item>
		<el-form-item><slot></slot></el-form-item>
	</el-form>
</template>

<script>
export default {
	name: 'CommonForm',
	props: {
		formLabel: {
			type: Array,
			required: true
		},
		form: {
			type: Object,
			required: true
		},
		inline: {
			type: Boolean,
			default: false
		},
		labelWidth: {
			type: String,
			default: '80px'
		}
	}
}
</script>

<style lang="less" scoped>

</style>